<template>
  <div style="height:100%;">
        <navbar :title="$t('attendance_ecord')"></navbar>
        <div class="content" style="background: #ffffff;">
            <van-tabs @click="checkTab" style="min-width:55%" color=" #075ebb" title-active-color=" #075ebb" title-inactive-color="#999">
                <van-tab name="RECORD" :title="$t('attendance_list')"></van-tab>
                <van-tab name="UNCONFIRMED" style="position: relative;" :title="$t('un_confirm')">
                </van-tab>
                <span v-if="unConfirmNum && unConfirmNum > 0" class="data-badge">{{unConfirmNum}}</span>
            </van-tabs>
            <!-- 列表数据 -->
            <div style="height: calc(100% - 47px);" class="body-content">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-grid :border=false>
                        <van-grid-item @click="!item.status ? jumpToUnConfirm(item.ilsId, item.usrEntId, item.pcrType) : ''" v-for="item in dataList" :key="item.usrDisplayBil">
                            <van-image
                            round
                            width="50px"
                            height="50px"
                            :src="appUrl + item.urxExtra43"
                            />
                            <div class="bilName" style="margin-top: 10px;">{{ item.usrDisplayBil }}</div>
                            <div :class="(item.status === 1 ? 'color0ace17' : !item.status ? 'colorOrange' : 'colorRed')" style="margin-top: 10px;font-weight: 700;">{{ item.statusDesc }}</div>
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    name: 'attendanceRecord',
    data() {
        return {
            dataList: [],
            isLoading: false,
            unConfirmNum: '', // 未确认人数
            isRefresh: false,
            ilsId: this.$route.query.id // 日程id
        };
    },
    mounted() {
        this.getUnConfirmNum();
        this.getList('RECORD');
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.getUnConfirmNum();
                this.getList('RECORD');
                this.isRefresh = false;
            }, 900);
        },
        checkTab(val) {
            this.dataList = [];
            this.getList(val);
        },
        getList(type) {
            this.isLoading = true;
            // 考勤状态: 考勤记录:RECORD  待确认: UNCONFIRMED
            if (type === 'RECORD') {
                this.$axios.get(`/app/api/course/lesson/list/attendance/${this.ilsId}`).then((res) => {
                    if (res.data && res.data.length !== 0) {
                        this.dataList = res.data;
                    }
                    this.isLoading = false;
                });
            } else {
                this.$axios.get(`/app/api/course/lesson/attendance/tobeConfirmed/${this.ilsId}`).then((res) => {
                    if (res.data && res.data.length !== 0) {
                        this.dataList = res.data;
                    }
                    this.isLoading = false;
                });
            }
        },
        // 获取待确认人数
        getUnConfirmNum() {
            this.$axios.get(`/app/api/course/lesson/attendance/tobeConfirmed/count/${this.ilsId}`).then((res) => {
                this.unConfirmNum = res.data;
            });
        },
        jumpToUnConfirm(id, userId, pcrType) {
            this.$router.push({
                path: '/faceConfirm',
                query: {
                    id: id,
                    userId: userId,
                    type: pcrType
                }
            });
        }
    }
};
</script>

<style scoped lang='less'>
/deep/.van-grid {
    padding: 20px;
    padding-left: 20px !important;
    .van-grid-item {
        flex-basis: auto !important;
        width: 80px;
    }
}
.data-badge {
    position: absolute;
    right: 56px;
    top: 0px;
    background: red;
    color: #fff;
    font-size: 8px;
    display: inline-block;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
}
/deep/.van-tabs {
    box-shadow: 0 6px 10px rgba(0, 0, 0, .1);
}
.bilName {
    width: 80px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 1;
}
.color0ace17 {
    color:#0ace17
}
.colorRed {
    color: #E63442;
}
.colorOrange {
    color: #60470381;
}
</style>
